{% extends "base.html" %}

{% block title %}{{ brand.name }} - 汽车品牌详情{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <a href="{{ url_for('index') }}" class="btn btn-sm btn-outline-secondary mb-2">
            <i class="bi bi-arrow-left me-1"></i>返回列表
        </a>
        <h1>{{ brand.name }}</h1>
        <p class="text-muted">
            <i class="bi bi-flag me-1"></i>{{ brand.country }}
            {% if brand.founded_year %}
                · <i class="bi bi-calendar me-1"></i>{{ brand.founded_year }}年创立
            {% endif %}
        </p>
    </div>
</div>

<div class="row mb-5">
    <!-- 品牌图片和基本信息 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            {% if brand.image_url %}
                <img src="{{ url_for('static', filename=brand.image_url) }}" 
                     class="card-img-top" 
                     alt="{{ brand.name }}" 
                     style="height: 300px; object-fit: cover;">
            {% else %}
                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 300px;">
                    <i class="bi bi-car-front fs-1 text-muted"></i>
                </div>
            {% endif %}
            <div class="card-body">
                <h5 class="card-title">品牌介绍</h5>
                <p class="card-text">{{ brand.description or '暂无详细介绍' }}</p>
                
                <!-- 投票区域 -->
                <div class="mt-4">
                    <h6>用户评价</h6>
                    <div class="d-flex align-items-center gap-3">
                        <button type="button" class="vote-btn btn btn-outline-primary {% if user_vote == 1 %}voted{% endif %}" onclick="document.getElementById('vote-form-1').submit()">
                            <i class="bi bi-hand-thumbs-up me-1"></i>推荐
                        </button>
                        <span class="fs-5">{{ total_votes }}</span>
                        <button type="button" class="vote-btn btn btn-outline-danger {% if user_vote == -1 %}voted{% endif %}" onclick="document.getElementById('vote-form-2').submit()">
                            <i class="bi bi-hand-thumbs-down me-1"></i>不推荐
                        </button>
                    </div>
                    <!-- 投票表单（隐藏） -->
                    <form id="vote-form-1" action="{{ url_for('vote_brand', brand_id=brand.id) }}" method="POST" class="d-none">
                        <input type="hidden" name="vote" value="1">
                    </form>
                    <form id="vote-form-2" action="{{ url_for('vote_brand', brand_id=brand.id) }}" method="POST" class="d-none">
                        <input type="hidden" name="vote" value="-1">
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论总结 -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">评论总结</h5>
                {% if comments %}
                    <form action="{{ url_for('generate_summary', brand_id=brand.id) }}" method="POST">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="bi bi-refresh me-1"></i>生成/更新总结
                        </button>
                    </form>
                {% endif %}
            </div>
            <div class="card-body">
                {% if summary %}
                    <p class="card-text">{{ summary.summary }}</p>
                    <small class="text-muted">
                        <i class="bi bi-clock me-1"></i>生成时间：{{ summary.generated_at.split('.')[0] }}
                    </small>
                {% elif comments %}
                    <p class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>点击"生成总结"按钮，获取AI对评论的分析总结
                    </p>
                {% else %}
                    <p class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>暂无用户评论，无法生成总结
                    </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 评论区 -->
<div class="row">
    <div class="col">
        <h3>用户评论 <span class="badge bg-secondary">{{ comments|length }}</span></h3>
        
        <!-- 添加评论表单 -->
        {% if 'user_id' in session %}
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">发表评论</h5>
                    <form action="{{ url_for('add_comment', brand_id=brand.id) }}" method="POST">
                        <div class="mb-3">
                            <textarea class="form-control" name="content" rows="3" placeholder="分享你对这个品牌的看法..." required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交评论</button>
                    </form>
                </div>
            </div>
        {% else %}
            <div class="alert alert-info mb-4">
                <i class="bi bi-info-circle me-1"></i>
                <a href="{{ url_for('login', next=request.url) }}">登录</a> 后可发表评论
            </div>
        {% endif %}
        
        <!-- 评论列表 -->
        {% if comments %}
            <div class="list-group">
                {% for comment in comments %}
                    <div class="list-group-item comment-card p-4">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h6 class="mb-0">{{ comment.username }}</h6>
                            <small class="text-muted">{{ comment.created_at.split('.')[0] }}</small>
                        </div>
                        <p class="mb-3">{{ comment.content }}</p>
                        <div class="d-flex align-items-center">
                            <span class="like-btn bi {% if comment.user_liked %}bi-heart-fill liked{% else %}bi-heart{% endif %}" data-comment-id="{{ comment.id }}"></span>
                            <span class="ms-1">{{ comment.like_count }}</span>
                            
                            <!-- 管理员删除评论按钮 -->
                            {% if session.get('is_admin') %}
                                <button type="button" class="btn btn-sm btn-danger ms-3" data-bs-toggle="modal" data-bs-target="#deleteCommentModal{{ comment.id }}">
                                    删除
                                </button>
                                <!-- 删除确认模态框 -->
                                <div class="modal fade" id="deleteCommentModal{{ comment.id }}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">确认删除</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                确定要删除这条评论吗？此操作不可恢复。
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                <form action="{{ url_for('delete_comment', comment_id=comment.id) }}" method="POST">
                                                    <button type="submit" class="btn btn-danger">删除</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-1"></i>暂无评论，快来发表第一条评论吧！
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}